<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/ZRT.js"></script>
		<link rel="stylesheet" type="text/css" href="../css/login.css"/>
	</head>
	<body>
		<div class="header2">
			<div class="logo2">
				<img src="../img/logo.png" >
			</div>
			<div class="nav2">
				<ul class="max-nav2">
					<li>
					    <a class="firstNav">首页</a>
				    </li>
				    <li>
				        <a href="http://www.baidu.com" class="firstNav"><span>护肤</span></a>
				    </li> 
				    <li>
						<a href="http://www.baidu.com" class="firstNav"><span>面膜</span></a>
				    </li>
				    <li>
						<a href="http://www.baidu.com" class="firstNav"><span>彩妆</span></a>
				    </li>
				    <li>
						<a href="http://www.baidu.com" class="firstNav"><span>男士</span></a>
				    </li>
				    <li class="secList">
						<a href="http://www.baidu.com" ="club firstNav">会员俱乐部</a>
						<ol>
							<li>
								<a href="">会员礼遇</a>
							</li>
							<li>
								<a href="">会员章程</a>
							</li>
							<li>
								<a href="">积分规则</a>
							</li>
				      </ol>
				    </li>
				    <li class="secList">
				      <a href="http://www.baidu.com" class="about firstNav">关于自然堂</a>
				      <ol>
							<li>
								<a href="">品牌故事</a>
							</li>
							<li>
								<a href="">品牌资讯</a>
							</li>
							<li>
								<a href="">品牌价值观</a>
							</li>
				      </ol>
				    </li>
					<li>
						<a href="http://www.baidu.com" class="firstNav">专柜查询</a>
					</li>
				    <li>
						<a href="http://www.baidu.com" class="firstNav">防伪查询</a>
					</li>
				</ul>	
				<ul class="min-nav2">
					<li><a href="http://www.baidu.com"></a><img src="../img/search.png" ></li>
					<li><a href="http://www.baidu.com"></a><img src="../img/shopping-cart.png" ></li>
					<li><a href="http://www.baidu.com"></a><img src="../img/my.png" ></li>
				</ul>
			</div>
		</div>
		<div id="hea"></div>
		
		<div class="log">
			<div class="denglu">
				<ul>
					<li style="border-bottom: #000000 3px solid;">登录</li>
					<li>|</li>
					<li>注册</li>
				</ul>
			</div>
			
			<div class="input">
				<ul class="top">
						<li>验证码登录</li>
						<li>账号密码登录</li>
					</ul>
				<div class="left1">
					
					
					
					<ul class="center">
						<li>
							<input type="text" placeholder="&nbsp;&nbsp;手机号码"style="width: 378px;height: 44px;"/>
						</li>
						<li>
							<input type="text" placeholder="&nbsp;&nbsp;请输入验证码"style="width:200px ;height: 44px;">
							<input type="text"style="width: 95px;height: 44px;margin-left: 6px;">
							<div style="float: right;margin-top: 5px;">
								<p>看不清？</p>
								<p>换一张</p>
							</div>
						</li>
						<li style="display: flex;justify-content:flex-start;">
							<input type="text" placeholder="&nbsp;&nbsp;短信验证码"style="width: 200px;height: 44px;">
							<button type="button"style="width: 165px;height: 44px;margin-left: 10px;background-color: #000000;color: white;">发送验证码</button>
						</li>
					</ul>
					<button type="button"style="width: 378px;height: 44px;text-align: center;background-color: black;color: white;margin-top: 40px;">登录</button>
					<p style="display: flex;justify-content: flex-start;margin-top: 30px;">
						使用第三方账号登录
						<img src="../img/wx%20(1).png" style="width: 22px;height: 22px;margin-left: 20px;">
						<img src="../img/wx%20(2).png"  style="width: 22px;height: 22px;margin-left: 20px;">
					</p>
				</div>
				<div class="left2">
					
					<ul class="center2">
						<li><input type="text"placeholder="&nbsp;&nbsp;请输入账号" style="width: 378px;height: 44px;" id="user"></li>
						<li><input type="text"placeholder="&nbsp;&nbsp;请输入密码" style="width: 378px;height: 44px;" id="pass"></li>
						<li style="display: flex;justify-content:flex-start;">
							<input type="text" placeholder="&nbsp;&nbsp;短信验证码"style="width: 200px;height: 44px;">
							<button type="button"style="width: 165px;height: 48px;margin-left: 10px;background-color: #000000;color: white;">发送验证码</button>
						</li>
					</ul>
					<p style="width: 378px;line-height: 44px;">忘记密码？</p>
					
					<button type="button"style="width: 378px;height: 44px;text-align: center;background-color: black;color: white;" id="login-btn">登录</button>
					<p style="display: flex;justify-content: flex-start;margin-top: 30px;">
						使用第三方账号登录
						<img src="../img/wx%20(1).png" style="width: 22px;height: 22px;margin-left: 20px;">
						<img src="../img/wx%20(2).png"  style="width: 22px;height: 22px;margin-left: 20px;">
					</p>
				</div>
				<div class="right">
					<h3>注册自然堂账户</h3>
					<p>注册自然堂账号以便追踪您的订单，管理收货地址， 获取更多个性化信息</p>
					<button type="button">创建账户</button>
				</div>
			</div>
		</div>
	
		<div id="last"></div>
	</body>
</html>
<script>
	$("#last").load("Tail.html");
	$("#hea").load("header.html",function(){
		
		$(window).scroll(function(){
			if($(this).scrollTop()>100){
				$(".header2").css("display","flex");
			}else{
				$(".header2").css("display","none");
			}
		})
	});
	
	$(".top li").on("click",function(){
		if($(this).index() == 0){
			$(".left2").css("display","none");
			$(".left1").css("display","block");
			
		}else{
			$(".left1").css("display","none");
			$(".left2").css("display","block");
		}
	})
	
</script>
<script src="../js/denglu.js" type="text/javascript" charset="utf-8"></script>
